<template>
	<view>
		<!-- <button @click="test">test</button> -->
		<view style="position:fixed;width: 100%;padding-bottom：30rpx;z-index:10" class="bg-white">
			<div style="height:30rpx;background-color: #fff;"></div>
			<view :style="{height: statusBarHeight + 'px'}" class="bg-white"></view>

			<Title :title="title" class="bg-white" />
		</view>
		<!-- <pre>
		{{model1}}

		</pre> -->
		<!-- <view style="height:130rpx"></view> -->
		<view :style="`height:calc(${statusBarHeight}px + 110rpx)`"></view>
		<tipSl :text="$t('【重要提示】请如实描述发布内容及相关信息，禁止虚假宣传！违规信息将下架或封号处理。')" style="margin: 0;background-color: transparent;"></tipSl>

		<u-form :model="model1" ref="uForm" class="ml-20 mr-20 formSty">
			<view class="contentBg mt-15">
				<u-form-item :border-bottom="false" prop="title" :required="true" :label="$t('标题')" label-position="top"
					class="titleSty">
					<u-input v-model="model1.title" type="text" :placeholder="$t('请输入标题')" :maxlength="200" :border="true"
						:auto-height="true" />
				</u-form-item>
			</view>
			<view class="contentBg mt-15">
				<u-form-item :border-bottom="false" prop="content" :required="true" :label="$t('内容详情')" label-position="top"
					class="titleSty" style="position: relative;">
					<u-input v-model="model1.content" type="textarea" :maxlength="1000" :placeholder="$t('请输入内容详情')"
						:border="true" height="240" :auto-height="true" />
					<p class="text-888 fz24" style="position: absolute; bottom: 30rpx; right: 20rpx;"> {{ remaining }}
					</p>
				</u-form-item>
			</view>
			<view class="contentBg mt-15">
				<u-form-item :border-bottom="false" prop="images" :required="true" :label="$t('支持jpeg、jpg、png格式大小7m内')"
					label-position="top" class="titleSty">
					<!-- <u-upload
					:action="action"
					:file-list="fileList1"
					:max-size="imageMaxSize"
					:max-count="max_count"
					:auto-upload="autoUpload"
					:show-upload-list="showUploadList"
					:del-bg-color="delBgColor"
					:del-color="delColor"
					:limit-type="limitType"
					@on-success="onSuccess"
					@on-remove="onRemove"
					:show-progress="false"
					width="150"
					height="150"
				>
				</u-upload> -->
					<view class="uploads">
						<view class="img" v-for="(item, index) in model1.images" :key="index"
							@click="onPreview(item.fullurl)">
							<image :src="item.fullurl" mode="aspectFill" />
							<view class="delete" @click.stop="onDelete(index, 'images')">
								<view class="lien"></view>
							</view>
						</view>
						<view class="img" @click="onUpload({ type: 'image', size: 7, count: 3 })"
							v-if="model1.images.length < 3">
							<image src="/static/caigou/camera.png" />
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" label-position="top" 
					:label="$t('支持mp4、mvb、AVI格式大小限制在35m内')"
					class="titleSty">
					<view class="uploads">
						<view class="img zhan" v-for="(item, index) in model1.videos" :key="index"
							@click="onPreviewVideo(item.fullurl)">
							<image src="@/static/play.png" mode="aspectFill" class=""></image>
							<view class="delete" @click.stop="onDelete(index, 'videos')">
								<view class="lien"></view>
							</view>
						</view>
						<view class="img" @click="onUpload({ type: 'video', size: 35, count: 1 })"
							v-if="model1.videos.length < 1">
							<image src="@/static/videox.png" mode="aspectFill" class="w-160 h-160" />
						</view>
					</view>
				</u-form-item>
			</view>
		</u-form>


		<!-- 播放视频 -->
		<uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
			<view class="wrapper-video">
				<video :src="previewVideoUrl" :show-center-play-btn="true" object-fit="cover" play-btn-position="center"
					:controls="true" :autoplay="true" class="video-main">
				</video>
			</view>
		</uni-popup>

		<view class="empty"></view>
		<view class="footer_btn4">
			<button class="btn_blue" :disabled="btnDis" @click="submit">{{$t('确认')}}</button>
		</view>


		
		<u-modal :confirm-text="$t('确定')"  :cancel-text ="$t('取消')"  v-model="showPersonInfo" width="70%" :show-title="false" @confirm="goSendSuccess">
			<view class="flex wrap center mt-30 mb-30">
				<view class="title" style="color: #f40;font-size: 30rpx;font-weight: 600;text-align: center;">{{$t('联系客服尽快通过审核')}}</view>
				<view class="phoneStxxxy" v-for="item in phoneList" @click="callPhone(item.tel+'')">
					{{item.country == 'zh'? $t('中国') : $t('俄罗斯')}} {{item.tel}}
				</view>
			</view>
		</u-modal>

	</view>
</template>

<script>
	import Title from './components/title.vue'
	import { getCustomerTel } from '@/api/basic'
	import {
		sendSaveExposure
	} from '@/api/basic'
	import citySelect from "./components/citySelect.vue"
	import {
		uploadFile,
		chooseFile
	} from '@/assets/public.js';
	import {
		HTTP_REQUEST_URL,
		IMAGE_MAX_SIZE,
		IMAGE_MAX_COUNT,
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		components: {
			Title,
			citySelect
		},
		data() {
			return {
				title: this.$t('发布'),
				btnDis: false,
				fileList2: [],
				fileList1: [],
				videoItem: {},
				statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
				action: HTTP_REQUEST_URL + '/common/upload',
				imageMaxSize: IMAGE_MAX_SIZE,
				imageMaxCount: IMAGE_MAX_COUNT,
				max_count: 3,
				autoUpload: true,
				showUploadList: true,
				unitList: ['￥', '₽'],
				delBgColor: '#fa3534',
				delColor: '#ffffff',
				uploadText: this.$t('选择图片'),
				limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'],
				action: `${HTTP_REQUEST_URL}/common/upload`,
				model1: {
					user_id: uni.getStorageSync("user_id"), // 用户id
					title: '',
					content: '',
					images: [],
					videos: [],
				},
				rules: {
					title: [{
						required: true,
						message: this.$t('请填写标题'),
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}],
					content: [{
						required: true,
						message: this.$t('请填写服务内容'),
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}],
					images: [{
						required: true,
						message: this.$t('请上传图片'),
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
						type: 'array'
					}],
				},
				maxLength: 1000,
				videoList: [],
				previewVideoUrl: '', // 视频预览
				imagesList: [],
				phoneList: [],
				showPersonInfo: false,
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			this.getCustomerTelsxx()
			if (options.modelInfo) {
				this.modelInfo = JSON.parse(options.modelInfo)
				console.log('88999', this.modelInfo)
				this.model1 = ({...this.model1, ...this.modelInfo})
				this.model1.videos = this.modelInfo.videos && this.modelInfo.videos.split(',')
				console.log('this.model1---', this.model1)
			}
		  },
		computed: {
			remaining() {
				return this.maxLength - this.model1.content.length;
			}
		},
		methods: {
			goSendSuccess() {
				this.showPersonInfo = false
				uni.redirectTo({
					url: '/pages/tabbar/exposurePlatform/sendSuccess'
				})
		
			},
			callPhone(tel) {
				this.isMessageGo({
					action: 'makePhoneCall',
					data: tel
				})
			},
			getCustomerTelsxx() {
				getCustomerTel().then(res => {
					this.phoneList = res.data.data
				})
			},
			// test() {
			// 	this.model1 = {
			// 		"user_id": "47",
			// 		"title": "123123",
			// 		"content": "123123",
			// 		"images": [{
			// 			"url": "/uploads/20250306/65b6d120d8301b424cd1c118854b5a0f.jpeg",
			// 			"fullurl": "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20250306/65b6d120d8301b424cd1c118854b5a0f.jpeg"
			// 		}],
			// 		"videos": ""
			// 	}
			// },
			back() {
				// uni.navigateBack()
				this.cback()
			},
			onPreview(current) {
				uni.previewImage({
					current,
					urls: [current],
					
				})
			},
			// 预览视频
			onPreviewVideo(url) {
				this.previewVideoUrl = url;
				this.$nextTick(() => {
					this.$refs.popupVideo.open()
				})
			},
			// 删除图片
			onDelete(index, arr) {
				this.model1[arr].splice(index, 1)
				this.$forceUpdate();
			},
			// 上传视频和图片
			async onUpload({
				type,
				size,
				count
			}, keyx) {
				let res = await uploadFile(await chooseFile({
					type,
					size,
					count,
				}))
				if (type == 'image') {
					this.model1.images.push(res);
				}
				if (type == 'video') {
					this.model1.videos = [res];
				}

			},

			submit() {
				const formData=JSON.parse(JSON.stringify(this.model1))
				
				formData.images=formData.images.map(item=>item.url).join(",")
				formData.videos=formData.videos.map(item=>item.url).join(",")
				console.log(formData)
				// return;
				  this.$refs.uForm.validate(valid => {
					if (valid) {
						this.btnDis= true
						uni.showLoading({
							title: this.$t('提交中')
						});
						sendSaveExposure({...formData}).then(res => {
							if (res.data.data == 200) {
								uni.showToast({
									title: this.$t('发布成功'),
									icon: 'success',
									duration: 2000
								})
								this.showPersonInfo = true
							
							} else {
								// uni.$u.toast(res.data.msg)
								uni.$u.toast(res.data[this.plang('msg')])
							}
							uni.hideLoading()
							this.btnDis= false
						})
					} else {
						uni.$u.toast(this.$t('请检查是否有未上传内容'))
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
	@import './index.scss';

	page {
		background: #F6F7FB;
	}

	.empty {
		width: 100%;
		height: 30rpx;
	}

	.titleSty {
		color: #262728;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 600;
		// padding-top: 34rpx;
		margin-left: 14rpx;
	}

	.formSty {
		padding-bottom: 200rpx;

		/deep/ .u-form-item__body {
			padding: 0;
		}
	}

	.smallInputSty {
		width: 194rpx;
		height: 80rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		border: 2rpx solid #D8D8D8;
		// background: #F7F7F7;
		color: #333;
		font-family: "PingFang SC";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 28rpx;

		/* 116.667% */
		/deep/ .uni-input-input,
		.uni-input-placeholder {
			text-align: center;
		}
	}

	.unitSty {
		width: 150rpx;
		height: 80rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		border: 2rpx solid #D8D8D8;
		line-height: 80rpx;
		text-align: center;

		.commonSty {
			color: #333;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
		}

		.acticeUnitSty {
			color: #278AFF;
		}
	}

	.contentBg {
		background-color: #fff;
		padding: 0 24rpx;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		border-radius: 18px;
		padding-bottom: 35rpx;

		/deep/ .u-form-item__body__right__message {
			margin-left: 0 !important;
		}

		/deep/ .u-icon__icon {
			font-size: 52rpx !important;
		}

		/deep/ .u-border-bottom {
			// border-bottom: none;
			// display: none;
			position: inherit;
		}

		/deep/ .u-add-wrap {
			// display: none !important;
			color: #D9D9D9;
			font-size: 20rpx;
		}

		/deep/ .u-add-tips {
			display: none !important;
		}

		/deep/ .u-input--border {
			border-radius: 18rpx !important;
		}

		/deep/ .u-form-item {
			line-height: 50rpx !important;
			color: #0e0e0e !important;
		}
	}

	.textareaSty {
		width: 100%;
		height: 226rpx !important;
		border-radius: 18rpx;
		border: 2rpx solid #D8D8D8;
		// background: #F7F7F7;
		margin-top: 24rpx;
	}

	.footer_btn4 {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding: 30rpx 24rpx 60rpx;
		z-index: 20;

		.btn_blue {
			width: 97%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}

		.btn_item {
			text-align: center;
			padding: 0 10rpx;

			.name {
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
		}

		.ico {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.commonKindSty {
		width: 150rpx;
		height: 64rpx;
		background-color: #F7F7F7;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 64rpx;
		letter-spacing: 0px;
		color: #1D1D1D;
		text-align: center;
		border-radius: 500rpx;
	}

	.activeKindSty {
		background-color: #D7E9FF;
		border: 1px solid #278AFF;
		color: #278AFF;
	}
</style>